import { emitter } from "../../eventEmitter";
import { useStore } from "../../store";
import { observer } from 'mobx-react-lite';

const Select = observer((props: any) => {
    const { toolBarStore, transformBarStore } = useStore();

    let className = ["inline-block", "p-1", "text-gray-700", "hover:bg-gray-50", "focus:relative"];
    if (toolBarStore.curMode === "select") {
        className.push("bg-gray-50");
    }

    const handleClick = () => {
        if (["rotate", "translate", "scale"].includes(transformBarStore.mode)) {
            return;
        }

        toolBarStore.setCurMode("select");
        emitter.emit("changeModeType", "select");
    };

    return (
        <button
            className={className.join(" ")}
            title="Select"
            onClick={handleClick}
        >
            <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <g>
                    <g>
                        <path stroke="#c3c1c1" d="M17 17L7 7m0 0v8m0-8h8"></path>
                    </g>
                </g>
            </svg>
        </button>
    );
});

export { Select };